<template>
  <div class="mt-4 mb-5">
    <el-steps class="w-full" finish-status="success">
      <el-step
        v-for="record of approveRecords"
        :key="record.id"
        :title="record?.nodeName"
        :status="EApproveState[record?.processResult]"
      >
        <template #description>
          <div>
            <div class="text-sm">{{ record?.processUserName }}</div>
            <div v-if="record?.processResult">{{ record?.processTime }}</div>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script lang="ts" setup>
import { TApproveRecords } from '@/plugins/approve'
import { ETaskReviewStatus } from '@/components/statusShow/util'

const EApproveState = {
  [ETaskReviewStatus['待审核']]: 'finish',
  [ETaskReviewStatus['通过']]: 'success',
  [ETaskReviewStatus['不通过']]: 'error',
  [ETaskReviewStatus['流程终止']]: 'wait',
}

withDefaults(
  defineProps<{
    approveRecords: TApproveRecords
  }>(),
  {},
)
</script>

<style lang="scss" scoped>
:deep(.el-step__title) {
  font-size: 12px;
}
</style>
